{% extends "base.html" %}

{% block title %}{{ config.SITE_NAME }}{% endblock %}

{% block content %}
<!-- 轮播图 -->
<div id="mainCarousel" class="carousel slide mb-5" data-bs-ride="carousel">
    <div class="carousel-indicators">
        {% for image in carousel_images %}
        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="{{ loop.index0 }}"
                {% if loop.first %}class="active"{% endif %}></button>
        {% endfor %}
    </div>
    <div class="carousel-inner">
        {% for image in carousel_images %}
        <div class="carousel-item {% if loop.first %}active{% endif %}">
            <img src="{{ image.image_url }}" class="d-block w-100" alt="{{ image.caption }}">
            <div class="carousel-caption d-none d-md-block">
                <h5>{{ image.caption }}</h5>
                {% if image.link_url %}
                <a href="{{ image.link_url }}" class="btn btn-light">了解更多</a>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="visually-hidden">Next</span>
    </button>
</div>

<!-- 欢迎信息 -->
<div class="text-center mb-5">
    <h1 class="display-4">欢迎来到{{ config.SITE_NAME }}</h1>
    <p class="lead">这是一个展示个人风采的平台，在这里你可以分享你的故事和经历。</p>
    {% if not current_user.is_authenticated %}
    <div class="mt-4">
        <a href="{{ url_for('auth_zyy.register_zyy') }}" class="btn btn-primary btn-lg me-3">立即注册</a>
        <a href="{{ url_for('auth_zyy.login_zyy') }}" class="btn btn-outline-primary btn-lg">登录</a>
    </div>
    {% endif %}
</div>

<!-- 特色内容 -->
<div class="row g-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">个人展示</h5>
                <p class="card-text">创建你的个人主页，展示你的兴趣爱好、学习经历和项目经验。</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">图片分享</h5>
                <p class="card-text">上传精美的图片，记录生活中的精彩瞬间。</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">邮箱注册</h5>
                <p class="card-text">真实信息进行邮箱注册，确保账户的安全性和合规性。</p>
            </div>
        </div>
    </div>
</div>
{% endblock %} 